<template>
	<view class="globe_back">
		<view class="box">
			<!-- <u-search placeholder="请输入搜索关键词" v-model="keyword" bgColor="#ffffff" :showAction="false"></u-search> -->
			<view class="box1 flex">
				<view style="width: 44rpx; margin-top: 16rpx"><u-icon name="arrow-left" @click="goBack"
						size="16"></u-icon></view>
				<u-search class="search" placeholder="请输入搜索关键词" v-model="keyword" bgColor="#ffffff" :showAction="false"
					shape="square"></u-search>
			</view>
			<view style="height: 30rpx"></view>
			<!-- 轮播图 -->
			<u-swiper :list="banner"></u-swiper>
			<!-- 公告 -->
			<view class="notice">
				<view class="NoticeBox">
					<image class="NoticeImg" src="/static/imgs/tip.png" mode="widthFix"></image>
				</view>
				<u-notice-bar :direction="direction" :text="notice" bgColor="#ffffff" color="#00091A"></u-notice-bar>
			</view>
			<!-- 商品列表 -->
			<view style="color: #5190E9;font-weight: 900;padding-top: 50rpx;" v-if="t==2">推荐电池</view>
			<u-tabs :list="category" @click="tab" v-if="t==1"></u-tabs>
			<!-- <view class="listBox flex flex_wrap">
				<view class="list" v-for="item in goods" @click="buy(item)">
					<lz-goods-card-item :item="item" @click="buy" />
				</view>
			</view> -->
			<view class="listBox flex flex_wrap">
				<view class="list" v-for="(item,index) in list">
					<!-- <lz-goods-card-item :item="item" @click="buy" /> -->
					<view @click.stop="buy(item.id)">
					    <image class="comimng" :src="item.gallery_images" mode="widthFix"></image>
					    <view class="title">{{ item.name }}</view>
					    <!--   -->
					    <view class="money">
					        ￥
					        <text class="moneyN">{{ item.specification[0].ch[0].money }}</text>
					        <text class="cost" v-if="t==2">￥{{ item.specification[0].ch[0].money }}</text>
							<text class="costs" v-if="t==1">月销{{ item.sales||0 }}</text>
					    </view>
					</view>
				</view>
			</view>
			<u-tabbar
				:value="value1"
				@change="change1"
				:fixed="true"
				:placeholder="false"
				:safeAreaInsetBottom="false"
			  >
				<u-tabbar-item text="商城首页" icon="home" @click="click1(1)" ></u-tabbar-item>
				<u-tabbar-item text="更换新电池" icon="photo" @click="click1(2)" ></u-tabbar-item>
			</u-tabbar>
		</view>

	</view>
</template>

<script>
	import {
		goodsCategory,
		goodsList,
		getConfByCode,
		lastNotice
	} from '@/api';
	export default {
		data() {
			return {
				url: '',
				banner: [],
				category: [],
				direction: 'row',
				notice: '',
				keyword: '',
				goods: [],
				list:[],
				change1:0,
				t:1
			};
		},
		onShow() {
			this.url = this.baseUrl + this.imgPath;
			// this.getCategory();
			this.getBanner();
			// this.getLastNotice();
			this.getGoodsList(1);
		},
		methods: {
			click1(e){
				this.t=e
				this.page=1
				
					this.getGoodsList(1);
				
			},
			getCategory() {
				goodsCategory().then((res) => {
					const categoryList = res.data.map((item) => {
						return {
							id: item.id,
							name: item.meta.title
						};
					});
					this.category = [{
						id: 1,
						name: '推荐'
					}, ...categoryList];
				});
			},
			getGoodsList(id) {
				this.$.ajax(1,"POST","index/store_goods_list",{
				  cid:id,
				  // is_hot:0,
				  t:this.t
				},(res)=>{
				  if(res.code==200){
					    this.list=res.data
					   console.log(res)
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
			},
			getBanner() {
				this.$.ajax(1,"POST","index/store_index",{},(res)=>{
				  if(res.code==200){
					 this.banner = res.data.banner;
					 this.notice=res.data.notice.title;
					 this.category=res.data.producttype;
				  }else{
				     this.$.ti_shi(res.msg);
				  }
				})
			},
			getLastNotice() {
			},
			tab(item) {
				this.getGoodsList(item.id);
				console.log('item', item);
			},
			buy(id) {
				
			 uni.navigateTo({
			 	  url:'/pages/index/ProductDetails?id='+id
			 })
				// uni.$u.route('/pages/index/ProductDetails', {
				// 	id
				// });
			},
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style scoped lang="scss">
	.comimng {
	    width: 100%;
	}
	.title {
	    margin: 16rpx;
	    color: #00091a;
	    font-size: 32rpx;
	}
	.tip {
	    font-size: 20rpx;
	    color: #3377ff;
	    padding: 8rpx;
	    border-radius: 8rpx;
	    margin-right: 16rpx;
	    background: #f7faff;
	}
	.money {
	    margin-top: 8rpx;
	    color: #ff6401;
	    font-size: 20rpx;
	    .moneyN {
	        font-size: 32rpx;
	        font-weight: bold;
	    }
	    .cost {
	        font-size: 24rpx;
	        color: #ccced1;
	        text-decoration: line-through;
	       
			margin-left: 8rpx;
	    }
		.costs{
		    font-size: 24rpx;
		    color: #ccced1;
		    // text-decoration: line-through;
		    // margin-left: 8rpx;
			float: right;
		}
	}
	.box1 {
		padding: 80rpx 0rpx 0rpx;
		vertical-align: middle;
		width: 65%;

		.search {
			border-radius: 8rpx;
		}
	}

	/deep/.u-notice-bar {
		display: inline-block;
		background: white;
		padding: 0 8rpx !important;
		border-left: 2rpx solid #f7f7f7;
		margin-left: 16rpx;
		width: 72%;
		margin-top: 12rpx;
	}

	// /deep/.u-icon--right {
	//     display: none !important;
	// }
	.box {
		padding: 32rpx;

		.listBox {
			margin-top: 30rpx;
		}

		.list {
			width: 45%;
			margin: 1%;
			padding: 1.5%;
			background: white;
			border-radius: 16rpx;

			.comimng {
				width: 100%;
			}

			.title {
				margin: 16rpx;
				color: #00091a;
				font-size: 32rpx;
				display: inline-block;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: bold;
			}

			.tip {
				font-size: 20rpx;
				color: #3377ff;
				padding: 8rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
				background: #f7faff;
			}

			.money {
				margin-top: 8rpx;
				color: #ff6401;
				font-size: 20rpx;

				.moneyN {
					font-size: 32rpx;
					font-weight: bold;
				}

				.cost {
					font-size: 24rpx;
					color: #ccced1;
					text-decoration: line-through;
					margin-left: 8rpx;
				}
			}
		}

		.NoticeBox {
			width: 20%;
			display: inline-block;
		}

		.NoticeImg {
			width: 100%;
		}

		.notice {
			margin-top: 30rpx;
			border-radius: 16rpx;
			padding: 16rpx 24rpx;
			background: white;
		}
	}
</style>